<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<view class="search-content ">


			<image class="search-img" :src="search" mode=""></image>
			<input placeholder="请搜索群成员" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

		</view>


		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="messagesList margin-top_20rpx" v-for="(item,index)  in list " :key="index">
			
					<view class="flex-between">
						<view class="flex-start-center">
							<image class="avatar" :src="item.avatar" mode=""></image>
							<view class="margin-left_20rpx">
								<view class="flex-start-center">
									<view class="font-weight font-overflow" style="margin-bottom: 10rpx;max-width: 350rpx; margin-right: 10rpx;">
										{{item.nickname}}
									</view>
									<view class="flex-start-center">
							
									<!-- 	<view class="male flex" v-if="item.sex==1">
											<image v-if="item.sex==1" class="maleImg" :src="path25"
												mode=""></image>
											<image v-if="item.sex==2" class="femaleImg"
												:src="path69" mode="aspectFit"></image>
											<text >{{item.age}}</text>
							
										</view> -->
										<!-- <view class="female flex" v-if="item.sex==2">
											<image v-if="item.sex==1" class="maleImg" :src="path25"
												mode=""></image>
											<image v-if="item.sex==2" class="femaleImg"
												:src="path69" mode="aspectFit"></image>
											<text >{{item.age}}</text>
																	
										</view>
										<view class="vip flex" v-if="item.level_name!='普通用户'">
										
											<image  class="vipImg"
												:src="" mode=""></image>
											<text style="color: #fff;margin-bottom: 5rpx;">vip</text>
										
										</view> -->
							
									</view>
								</view>
								<view class="">
									<!-- <text class="font-overflow2" style="margin-right: 10rpx;color: #666666;max-width: 560rpx;">{{item.introduce?item.introduce:'本人很懒什么介绍都没有~'}}</text> -->
							         <text>{{'购买价格('+currency_name+')'}}:{{item.price}}</text>
									 
								</view>
								<view class="">
									<!-- <text class="font-overflow2" style="margin-right: 10rpx;color: #666666;max-width: 560rpx;">{{item.introduce?item.introduce:'本人很懒什么介绍都没有~'}}</text> -->
								    <text>优惠折扣:{{100-Number(item.discount)}}%</text>
								    
									 
								</view>
							
							</view>
						</view>
						<view class="homepage flex" @click="ViewHomepageFn(item.uid)">
							<text style="margin-bottom: 5rpx;">查看主页</text>
						</view>
						
						
					</view>
					
				
			</view>
		</mescroll-body>
	

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				currency_img:uni.getStorageSync("system").currency_img,
			currency_name:uni.getStorageSync('system').currency_name,
				masonry:this.$img.masonry,
				daziBg1:this.$img.daziBg1,
				search:this.$img.search,
				path25:this.$img.path25,
				path69:this.$img.path69,
				list: [],
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},

				windowHeight: 0,
				searchVal:'',
				id:''

			}
		},
		onLoad(options) {
           if(options.id){
			   this.id=options.id
			   this.$nextTick(() => {
			   	this.mescroll?.resetUpScroll();
			   })
		   }
		
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight  - 750;
				}
			});
		
		},
		onShow() {
	this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		methods: {
			ViewHomepageFn(uid) {
				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: uid
				})
			
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.communityUser,
					data: {
						page: scroll.num,
						limit: 10,
						nickname:this.searchVal,
						id:this.id




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					// 		this.list.forEach((item) => {

					// 			item.labelList = item.label.split(",")
					// 		})



					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
		},
		computed: {
			numberMessages: function() {
				return function(num) {

					if (num > 99) {

						return String(99) + '+';
					} else {

						return String(num);
					}
				};
			}
		},
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		
		padding: 30rpx;
         
		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			// margin: 20rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.messagesList {
          .homepage {
          	width: 144rpx;
          	height: 64rpx;
          	box-sizing: border-box;
          	border: 2rpx solid rgb(120, 93, 246);
          	border-radius: 76px;
          	color: rgb(120, 93, 246);
          	background: rgb(255, 255, 255);
          }
			.avatar {
				width: 122rpx;
				height: 124rpx;
				border-radius: 50%;
			}

			.female {
				width: 96rpx;
				height: 36rpx;
				border-radius: 20rpx;
				color: #fff;
				background: #FA5799;

				.femaleImg {
					margin-top: 5rpx;
					width: 20.96rpx !important;
					height: 20.96rpx !important;
					margin-right: 15rpx;
				}
			}

			.male {
				width: 96rpx;
				height: 36rpx;
				border-radius: 20rpx;
				color: #fff;
				background: rgb(1, 145, 255);
               .femaleImg {
               	margin-top: 5rpx;
               	width: 20.96rpx !important;
               	height: 20.96rpx !important;
               	margin-right: 15rpx;
               }
				.maleImg {
						margin-top: 5rpx;
				width: 20.96rpx !important;
				height: 20.96rpx !important;
					margin-right: 15rpx;
				}
			}
			.vip{
				width: 96rpx;
				height: 36rpx;
				border-radius: 20rpx;
				color: #fff;
			    margin-left: 15rpx;
			
				background: linear-gradient(90.00deg, rgb(145, 91, 227) 0%,rgb(189, 108, 223) 100%);
				.vipImg {
					width: 24.96rpx;
					height: 24.96rpx;
					margin-right: 10rpx;
					margin-top: 8rpx;
				}
			}

			.news {
				width: 55rpx;
				height: 55rpx;
				background-color: red;
				border-radius: 50%;
				color: #fff;
			}

		}



	}
</style>